// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { plateDetail, cardList, plateFollow, cardLike } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RnFlatList, CardPost } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, borderBottom, borderTop, pathHead, requestPlateFollow, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class PlateDetail extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      searchBackgroundColor: '#ccc',
      loading: false,
      type: 1,
      detail: null,
      dataList: defaultDataList
    }
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步的任务...
      this.showLoadingData()
      this.handleData().finally(() => { })
    });
  }

  showLoadingData(options) {
    this.loading = Toast.loading('加载中', 0)
    this.loadingData(options).then(res => {
      this.setState({
        detail: res[0].data
      })
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  loadingData(options) {
    const { id } = this.props
    return Promise.all([plateDetail({ id })])
  }

  handleData(options) {
    const { id } = this.props
    const { type } = this.state
    return new Promise((resolve, reject) => {
      cardList({
        plateId: id,
        type,
        ...defaultPage.call(this),
        ...options
      }).then(res => {
        resolve(res)
        concatDataList.call(this, res)
      }).catch(error => {
        reject(error)
        console.log(error, 11111)
      })
    }).catch(error => {
      console.error(error)
    })
  }

  onRefresh = () => {
    onRefresh.call(this)
  }

  onEndReached = () => {
    onEndReached.call(this)
  }

  onScroll = (e) => {
    const { searchBackgroundColor } = this.state
    if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
      this.setState({
        searchBackgroundColor: '#e43130'
      })
    } else {
      this.setState({
        searchBackgroundColor: 'transparent'
      })
    }
  }

  handleCardLike(like, data, index) {
    const { dataList } = this.state
    // if (!like) {
    //   dataList.records.splice(index, 1)
    //   this.setState()
    // }
    // const { handleCardLike } = this.props
    // requestCardLike.call(this, options).then(res => {
    //   handleCardLike()
    // })
  }


  handlePlateFollow(options) {
    requestPlateFollow(options).then(res => {
      this.showLoadingData()
    })
  }

  render() {
    const { refreshing, dataList, detail, type } = this.state
    return (
      <View style={Style.container} >
        <Status />
        <NavBar
          title=""
          back={true}
        />
        <RnFlatList
          style={{
            flex: 1,
            backgroundColor: '#f0f2f5',
          }}
          onScroll={this.onScroll}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
          onEndReached={this.onEndReached}
          removeClippedSubviews={true}
          data={dataList}
          ListHeaderComponent={() => {
            if (!detail) {
              return null
            }
            return (
              <View
                style={{
                  overflow: 'hidden',
                  backgroundColor: '#fff',
                  zIndex: 0,
                  marginBottom: 10
                }}
              >
                <View
                  style={{
                    flex: 1,
                    padding: 15,
                  }}
                >
                  <View style={{
                    alignItems: 'center',
                    flexDirection: 'row',
                    marginBottom: 8,
                  }}>
                    <CacheImage
                      resizeMod={"contain"}
                      style={{
                        marginRight: 15,
                        width: 90,
                        height: 90,
                        borderRadius: 45,
                        overflow: 'hidden'
                      }}
                      source={{ uri: `${pathHead}${detail.icon}` }}
                    />
                    <View style={{ flex: 1 }}>
                      <View style={{}}>
                        <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                          <Text style={{ fontSize: 16, color: '#000', lineHeight: 18, }}>{detail.name}</Text>
                          <View style={{
                            marginLeft: 10
                          }}>
                            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>关注数：{detail.followCount}</Text>
                          </View>
                        </View>
                        <View
                          style={{
                            marginTop: 8,
                          }}
                        >
                          <Text style={{ fontSize: 14, color: '#61676F', }}>
                            {detail.desc || '暂无简介'}
                          </Text>
                        </View>
                      </View>
                      <View style={{ flexDirection: 'row', marginTop: 10 }}>
                        {detail.follow ? (
                          <TouchableOpacity
                            style={{
                              paddingVertical: 5,
                              paddingHorizontal: 15,
                              borderRadius: 5,
                              backgroundColor: '#000'
                            }}
                            onPress={() => {
                              this.handlePlateFollow({ id: detail.id, type: 0 })
                            }}
                          >
                            <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>取消关注</Text>
                          </TouchableOpacity>
                        ) : (
                            <TouchableOpacity
                              style={{
                                paddingVertical: 5,
                                paddingHorizontal: 15,
                                borderRadius: 5,
                                backgroundColor: '#000'
                              }}
                              onPress={() => {
                                this.handlePlateFollow({ id: detail.id, type: 1 })
                              }}
                            >
                              <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>关注</Text>
                            </TouchableOpacity>
                          )}
                      </View>
                    </View>
                  </View>
                </View>
                <View style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'center',
                  ...borderTop()
                }}>
                  <TouchableOpacity
                    style={[{
                      paddingVertical: 15,
                      paddingHorizontal: 5,
                    }, type == 1 ? {
                      ...borderBottom({ color: '#000000' })
                    } : null]}
                    onPress={() => {
                      this.setState({
                        type: 1
                      }, () => {
                        this.onRefresh()
                      })
                    }}
                  >
                    <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>最新</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[{
                      paddingVertical: 15,
                      paddingHorizontal: 5,
                    }, type == 2 ? {
                      ...borderBottom({ color: '#000000' })
                    } : null]}
                    onPress={() => {
                      this.setState({
                        type: 2
                      }, () => {
                        this.onRefresh()
                      })
                    }}
                  >
                    <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>最热</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[{
                      paddingVertical: 15,
                      paddingHorizontal: 5,
                    }, type == 3 ? {
                      ...borderBottom({ color: '#000000' })
                    } : null]}
                    onPress={() => {
                      this.setState({
                        type: 3
                      }, () => {
                        this.onRefresh()
                      })
                    }}
                  >
                    <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>精华</Text>
                  </TouchableOpacity>
                </View>
              </View>
            )
          }}
          renderItem={({ item }) => {
            return (
              <CardPost
                data={item}
                handleCardLike={(like) => this.handleCardLike()}
              />
            )
          }}
        />
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(PlateDetail))
